import { useEffect } from 'react';
import s from './index.module.scss';

const Point = ({ activeIndex, i, changeSilder }) => {
  return (
    <div className={s.point_wrapper}>
      <div
        className={activeIndex === i ? s.point_actived : s.point}
        onClick={() => {
          changeSilder(i);
        }}
      ></div>
    </div>
  );
};
const Pagination = ({ len, activeIndex, changeSilder }) => {
  return (
    <div className={s.container}>
      {len > 0 &&
        new Array(len).fill(-1).map((item, index) => {
          return (
            <Point
              key={index}
              activeIndex={activeIndex}
              i={index}
              changeSilder={changeSilder}
            />
          );
        })}
    </div>
  );
};

export default Pagination;
